<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>项目详情</span>
      </div>
      <el-row class="row">
        <el-col :span="8">
          <span class="indent">项目名称</span>
          <span class="text">{{detail.name}}</span>
        </el-col>
        <el-col :span="8">
          <span class="indent">项目类型</span>
          <span class="text">{{detail.projectTypeText}}</span>
        </el-col>
        <el-col :span="8">
          <span class="indent">项目等级</span>
          <span class="text">{{detail.projectLevelText}}</span>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="8">
          <span class="indent">项目描述</span>
          <span class="text">{{detail.projectDescribe}}</span>
        </el-col>
        <el-col :span="8">
          <span class="indent">负责人</span>
          <span class="text">{{detail.managerName}}</span>
        </el-col>
        <el-col :span="8">
          <span class="indent">状态</span>
          <span class="text">{{detail.projectStatusText}}</span>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="8">
          <span class="indent">立项时间</span>
          <span class="text">{{detail.projectDate}}</span>
        </el-col>
        <el-col :span="8" :offset="8">
          <span class="indent">结项时间</span>
          <span class="text">{{detail.completeDate}}</span>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="8">
          <span class="indent">计划开始时间</span>
          <span class="text">{{detail.planStartDate}}</span>
        </el-col>
        <el-col :span="8" :offset="8">
          <span class="indent">计划完成时间</span>
          <span class="text">{{detail.planEndDate}}</span>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="8">
          <span class="indent">实际开始时间</span>
          <span class="text">{{detail.actualStartDate}}</span>
        </el-col>
        <el-col :span="8" :offset="8">
          <span class="indent">实际完成时间</span>
          <span class="text">{{detail.actualEndDate}}</span>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-button type="danger" @click="edit">修改</el-button>
      </el-row>
    </el-card>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" center>
      <el-form :model="form" :rules="rules"  ref="form">
        <el-form-item label="项目类型" :label-width="formLabelWidth" required>
          <el-select
            v-model="form.projectType"
            value-key="name"
            placeholder="请选择项目类型"
            style="width:100%"
          >
            <el-option
              :label="project.name"
              :value="project"
              v-for="project in projects"
              :key="project.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称" :label-width="formLabelWidth" required>
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目描述" :label-width="formLabelWidth">
          <el-input v-model="form.projectDescribe" type="textarea" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editProject">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      query: this.$route.query,
      detail: {},
      isEdit: false,
      projectId: "",
      form: {
        projectType: '',
        name: '',
        projectDescribe: ''
      },
      formLabelWidth: '120px',
      title: "",
      dialogFormVisible: false,
      projects: [{
        name: '设备',
        id: '1'
      }, {
        name: '软件',
        id: '2'
      }],
      rules: {
        projectType: [
          {required: true, message: '请选择项目类型', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请填写项目名称', trigger: 'blur'}
        ]
      },
      levels: []
    };
  },
  methods: {
    getProjectDetail() {
      let params = {
        id: this.query.id
      };
      this.$store.dispatch("project/getProjectDetail", params).then(res => {
        res.projectStatusText = $status.projectStatus[res.projectStatus];
        this.detail = res;
        if(res.projectStatus != '1') {
          let name = this.projects.filter(el => {
            return el.id == this.detail.projectType
          })[0].name;
          let level = this.levels.filter(el => {
            return el.key == this.detail.projectLevel
          });
          this.detail.projectLevelText = level[0].name;
        }
        this.detail.projectTypeText = name;
        this.$store.state.project.approveId = res.approveId;
      });
    },
    edit() {
      let detail = this.detail;
      let name = this.projects.filter(item => {
        return item.id == detail.projectType
      })[0].name;
      this.title = "修改项目";
      this.form.projectType = {
        value: detail.projectType,
        name: name
      };
      this.form.name = detail.name;
      this.form.projectDescribe = detail.projectDescribe;
      this.isEdit = true;
      this.projectId = detail.id;
      this.dialogFormVisible = true;
    },
    editProject() {
      this.$refs['form'].validate((valid) => {
        if(!valid) {

        } else {
          let form = this.form;
          let params = {
            id: this.projectId,
            name: form.name,
            projectType: form.projectType.id,
            projectDescribe: form.projectDescribe
          };
          this.$store.dispatch("project/editProject", params).then(res => {
            this.showSuccessMessage("成功修改项目");
            this.dialogFormVisible = false;
            this.getProjectDetail();
          });
        }
      });
    },
    getLevelList() {
      let params = {
        configKey: 'project_level'
      };
      this.$store.dispatch('common/getConfigValueByKey', params).then(res => {
        this.levels = JSON.parse(res);
        this.getProjectDetail();
      });
    }
  },
  mounted() {
    this.getLevelList();
  }
};
</script>
<style lang="less" scoped>
.indent {
  margin-right: 20px;
  opacity: 0.85;
  font-size: 14px;
}
.row {
  margin-top: 16px;
}
.text {
  font-size: 14px;
  opacity: 0.65;
}
</style>